<template>
  <grimm-page title="Toolbar">
    <div slot="content" class="content">
      <p class="example-page-title">当数据超出默认显示数量时</p>
      <grimm-switch
        class="grimm-tool-bar-margin"
        v-model="checked"
        :name="optionValue.value"
        :onChangeAfter="onChangeAfter"
      >More Bar</grimm-switch>
      <p class="example-page-title">设置默认显示几个tab</p>
      <grimm-input v-model="barNum" class="grimm-tool-bar-margin" />
      <p class="example-page-title">设置显示动画</p>
      <grimm-radio-group v-model="animation" :options="radioOptions" />
      <div class="grimm-tool-bar-content">{{content}}</div>
      <grimm-toolbar
        :data="toolBarList"
        :clickHandler="onClickBar"
        :barNum="barNum"
        :animation="animation"
      />
    </div>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';

const data = [
  { label: '首页', icon: 'radio-active' },
  { label: '酒店数据', icon: 'hotel-data' },
  { label: '管理中心', icon: 'admin' },
];
export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      content: '',
      barNum: 4,
      checked: 1,
      optionValue: {
        label: 'Option Checkbox',
        value: '1',
      },
      animation: '',
      radioOptions: [
        {
          label: 'default',
          value: '',
        },
        {
          label: 'fadeIn',
          value: 'fadeIn',
        },
        {
          label: 'spin',
          value: 'spin',
        },
        {
          label: 'sway',
          value: 'sway',
        },
        {
          label: 'enlarge',
          value: 'enlarge',
        },
        {
          label: 'shrink',
          value: 'shrink',
        },
      ],
      toolBarMoreList: [
        { label: '首页', icon: 'file' },
        { label: '酒店数据', icon: 'hotel-data' },
        { label: '管理中心', icon: 'admin' },
        { label: '关于我们', icon: 'about-us' },
        { label: '支付', icon: 'payment' },
        { label: '意见反馈', icon: 'feedback' },
      ],
      toolBarList: data,
    };
  },
  mounted() {
    this.getContent();
  },
  methods: {
    onClickBar(value, index) {
      this.content = `当前页面：${this.toolBarList[index].label}`;
    },
    onChangeAfter(vals, opts) {
      if (vals) {
        this.toolBarList = this.toolBarMoreList;
      } else {
        this.toolBarList = data;
      }
    },
    getContent() {
      this.content = `当前页面：${this.toolBarList[0].label}`;
    },
  },
};
</script>
<style lang="stylus" >
@import '../../../src/common/stylus/variable';

.grimm-tool-bar-content {
  margin: 60px auto 0;
  min-width: 70%;
  width: fit-content;
  line-height: 50px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.grimm-tool-bar-margin {
  margin: 10px 0;
  height: 30px;
}

.grimm-radio-group {
  height: 60px;
  margin: 10px 0;

  .grimm-radio {
    display: inline-block;
  }
}
</style>

